<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cookie应用</title>
    <style>

    </style>
</head>
<body>
    <div id="btnbox">
        <button>全选</button>
        <button>取消</button>
        <button>反选</button>
    </div>
    <div id="box">
        <input type="checkbox" name="ckx" value="">
        <input type="checkbox" name="ckx" value="">
        <input type="checkbox" name="ckx" value="">
        <input type="checkbox" name="ckx" value="">
        <input type="checkbox" name="ckx" value="">
        <input type="checkbox" name="ckx" value="">
        <input type="checkbox" name="ckx" value="">
        <input type="checkbox" name="ckx" value="">
        <input type="checkbox" name="ckx" value="">
        <input type="checkbox" name="ckx" value="">
    </div>
    <script>
    function setCookie(Name,Value,eDay){
        var date=new Date();
        date.setTime(date.getTime()+eDay*24*3600*1000);
        document.cookie=Name+'='+Value+';expires='+date;
        }

    function getCookie(Name){
        var arr=document.cookie.split(';');
        for(var i=0;i<arr.length;i++)
        {
            if(arr[i].trim().indexOf(Name+'=')==0)
            {
               return arr[i].trim().slice((Name+'=').length);
            }
        }
        return '';
    }

    function bianli(){
            var arr=[];
            for(var j=0;j<inputs.length;j++)    //每次点击就遍历整个inputs数组
            {    
                if(inputs[j].checked==true)     //若checked==true,则将inputs数组所
                {
                    arr.push(j);                //对应的下标存到arr数组
                }
            }
            // console.log(arr);
            var str=arr.toString();             //将arr数组转化为字符串
            // console.log(str);
            setCookie('checked',str,1); 
    }

    var inputs=document.getElementById('box').children;
    for(var i=0;i<inputs.length;i++)
    {
        inputs[i].onclick=function(){
            bianli();
        }
    }

    var btns=document.getElementById('btnbox').children;
    btns[0].onclick=function(){
        for(var i=0;i<inputs.length;i++)
        {
            inputs[i].checked ? inputs[i].checked=true : inputs[i].checked=true;

        }
        bianli();
    }

    btns[1].onclick=function(){
        for(var i=0;i<inputs.length;i++)
        {
            inputs[i].checked ? inputs[i].checked=false : inputs[i].checked=false;
        }
        bianli();
    }

    btns[2].onclick=function(){
        for(var i=0;i<inputs.length;i++)
        {
            inputs[i].checked ? inputs[i].checked=false : inputs[i].checked=true;
        }
        bianli();
    }

    //获取cookie值,并将其转化数组,数组中的值即为:checked==true的input所对应的下标。
    var value=getCookie('checked');
    var arrN=value.split(',');
    console.log(arrN);
    if(arrN[0] != ""){
        for(var j=0;j<arrN.length;j++)
        {
            inputs[arrN[j]].checked=true;
        }
    }
    </script>
</body>
</html>